<template>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-menu-item
      v-for="k in NationData"
      :key="k.path"
      :index="k.title"
      v-show="!k.children"
      @click="toPage(k.path)"
      >{{ k["title"] }}</el-menu-item
    >

    <el-sub-menu
      v-for="k in NationData"
      :key="k.path"
      :index="k.title"
      v-show="k.children"
      @click="toPage(k.path)"
    >
      <template #title>{{ k["title"] }}</template>
      <el-menu-item
        @click="toPage(K_Childeren.path)"
        v-for="K_Childeren in k.children"
        :index="K_Childeren.title"
        >{{ K_Childeren["title"] }}</el-menu-item
      >
    </el-sub-menu>
    <div class="Midpass">
      <div class="sing">登入</div>
    </div>
    <div class="rigthPart">
      <div class="search">
        <el-autocomplete
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          placeholder="Please input"
          @select="handleSearch"
        />
      </div>
    </div>
  </el-menu>
</template>

<script lang="ts" setup>
/**

 */
import { onMounted, ref } from "vue-demi";
import { useRouter } from "vue-router";
const activeIndex2 = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const router = useRouter();
function toPage(url: string) {
  if (url[0] == "h") {
    window.open(url, "_blank");
  } else {
    router.push(url);
  }
}
const classUrl = "http://edu.xinpianchang.com/?from=navigator";
const NationData = [
  { title: "首页", path: "/" },
  {
    title: "发现",
    path: "/rescover",
    children: [
      { title: "广告", path: "/rescover" },
      { title: "宣传片", path: "/rescover" },
      { title: "剧情短片", path: "/rescover" },
      { title: "记录", path: "/rescover" },
      { title: "创意", path: "/rescover" },
    ],
  },
  {
    title: "课堂",
    path: classUrl,
    children: [
      { title: "在线职业班", path: classUrl },
      { title: "线下职业班", path: classUrl },
      { title: "会员课程", path: classUrl },
      { title: "软件入门", path: classUrl },
      { title: "后期制作", path: classUrl },
      { title: "艺术留学", path: classUrl },
    ],
  },
  {
    title: "素材",
    path: "2",
    children: [
      {
        title: "动物",
        path: "https://stock.xinpianchang.com/footage/list?keyword=%E5%8A%A8%E7%89%A9&from=navigator",
      },
      {
        title: "航拍",
        path: "https://stock.xinpianchang.com/footage/list?keyword=%E8%88%AA%E6%8B%8D&from=navigator",
      },
      {
        title: "自然",
        path: "https://stock.xinpianchang.com/footage/list?keyword=%E8%87%AA%E7%84%B6&from=navigator",
      },
      {
        title: "科技",
        path: "https://stock.xinpianchang.com/footage/list?keyword=%E7%A7%91%E6%8A%80&from=navigator",
      },
      {
        title: "城市",
        path: "https://stock.xinpianchang.com/footage/list?keyword=%E5%9F%8E%E5%B8%82&from=navigator",
      },
      {
        title: "商业",
        path: "https://stock.xinpianchang.com/footage/list?keyword=%E5%95%86%E4%B8%9A&from=navigator",
      },
    ],
  },
  {
    title: "更多",
    path: "2",
    children: [
      { title: "快活", path: "https://hire.xinpianchang.com/?from=navigator" },
      {
        title: "活动",
        path: "https://www.xinpianchang.com/activity?from=navigator",
      },
      {
        title: "新片场影业",
        path: "https://film.xinpianchang.com/?from=navigator",
      },
      {
        title: "新片场营销",
        path: "https://www.xinpianchang.com/project/make?from=navigator",
      },
    ],
  },
];

const state = ref("");

interface LinkItem {
  value: string;
  link: string;
}

const links = ref<LinkItem[]>([]);
/**搜索 开始*/
const loadAll = () => {
  return [
    { value: "雷神4预告", link: "https://github.com/vuejs/vue" },
    { value: "奥迪", link: "https://github.com/ElemeFE/element" },
    { value: "青春就得这么拍", link: "https://github.com/ElemeFE/cooking" },
    { value: "长镜头回顾大话西游", link: "https://github.com/ElemeFE/mint-ui" },
    { value: "小满", link: "https://github.com/vuejs/vuex" },
    { value: "爱死机", link: "https://github.com/vuejs/vue-router" },
    { value: "刘德华", link: "https://github.com/babel/babel" },
  ];
};

let timeout: NodeJS.Timeout;
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value;

  clearTimeout(timeout);
  timeout = setTimeout(() => {
    cb(results);
  }, 1000);
};
const createFilter = (queryString: string) => {
  return (restaurant: LinkItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

const handleSearch = (item: LinkItem) => {
  console.log(item);
};

onMounted(() => {
  links.value = loadAll();
});
/**搜索 接受*/
</script>




<style>
.Midpass {
  display: flex;
  width: 40%;
  flex-direction: row-reverse;
}
.Midpass .sing {
  line-height: 50px;
  font-size: 20px;
  color: white;
  cursor: pointer;
}
.Midpass .sing:hover {
  color: rgb(255, 148, 8);
}

.rigthPart {
  margin-left: 50px;
  display: flex;
}

.rigthPart .search {
  line-height: 50px;
}
</style>